
<template>

   <div class="c-footer">
     <van-tabbar v-model="active" active-color="#c2463a" inactive-color="#8e8e8e" safe-area-inset-bottom border>
       <van-tabbar-item icon="home-o" to="/">发现</van-tabbar-item>
       <van-tabbar-item icon="video-o" to="/videos">视频</van-tabbar-item>
       <van-tabbar-item icon="service-o" to="/my">我的</van-tabbar-item>
       <van-tabbar-item icon="friends-o" dot to="/friend">朋友</van-tabbar-item>
       <van-tabbar-item icon="contact" info="99+" to="/account">账号</van-tabbar-item>
     </van-tabbar>
   </div>

</template>

<script>
    export default {
        name: "index",
      data(){
        return {
          active: 0,
        }
      },
      methods: {
      },
      created() {
        if (this.$route.name === "Home") {
          this.active = 0;
        } else if (this.$route.name === "videos") {
          this.active = 1;
        } else if (this.$route.name === "my") {
          this.active = 2;
        }else if (this.$route.name === "friend") {
          this.active = 3;
        } else if (this.$route.name === "account") {
          this.active = 4;
        }

      }
    }
</script>


<style scoped>

  .c-footer{
    position: fixed;
    z-index: 10000;
    width: 100vw;
    background: #fff;
    border-top: 1px solid #F3F5F7;
    bottom: 0;
  }

</style>
